<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
    <div id="root">      
       
        
    </div>

</body>

<script type="text/javascript">
    Vue.config.performance = false

    // 子组件
    const student = {
        template:`
            <div>
                <h4>学生姓名：{{studentName}}</h4>
                <h4>学生年龄：{{age}}</h4>
            </div>
        `,
        data(){
            return {
                studentName:'张三',
                age:18,
            }
        }
    };

    // 子组件
    const hello = Vue.extend({
        template:`
            <div>
                <h5>你好 {{name}}</h5>    
            </div>
        `,
        data(){
            return {
                name:'vue',
            }
        }
    });

    // 1 创建组件 -- 局部组件
    const school = Vue.extend({
        // el:'#root', --一定不要写el
        template: `
            <div>
                <h4>学校名称：{{schoolName}}</h4>
                <h4>学校地址：{{addr}}</h4>
                <button @click="showName">点击提示学校名</button>
                <student></student>
            </div>
        `,
        data(){
            return {
                schoolName:'浙大',
                addr:'浙江杭州',
            }
        },
        components:{
            
            student
        },
        
        methods: {
            showName() {
                alert(this.schoolName)
            },
        },
    });

    const app = {
        template:`
            <div> 
                <hello></hello>
                <school></school>
            </div>
        `,
        components:{
            school,
            hello,
        }
    }

    //创建vm
    const vm = new Vue({
        el:'#root',
        template:`
            <app></app>
        `,
        // 2 注册组件，多个单词全部小写或者-，或者在脚手架全大写
        components:{
            app
        }
    })


</script>
</html>